{% extends 'framework/../framework/layout.html' %}

{% block content %}
    <div class="container">

        <div class="row">

            <div class="col-md-4  card   center-block">
                <form action="" method="post" novalidate>
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="">用户名</label>
                        {{ form.username }}
                    </div>

                    <div class="form-group">
                        <label for="">密码</label>
                        {{ form.password }}
                    </div>
                    <div class="form-group">
                        <label for="">验证码</label>
                        <div class="row">
                            <div class="col-md-6">
                                <input type="text" name="validcode" id="validcode" class="form-control">
                            </div>
                            <div class="col-md-4">
{#                                <img width="350" height="46" id="img" src="/get_valid_img" alt="">#}
                                <img width="160" height="36" id="img" src="/get_valid_img" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="">验证码</label>
                        {{ form.captcha }}
                    </div>
                    <div>
                        <a href="/myaccount/register/" class="text-success float-left"><ins>新用户注册</ins></a>
                        <button type="submit" class="btn btn-success float-right">登录</button>
                    </div>


                </form>
                <div style="text-align: center">
                    <button id="btn_up" class="btn btn-success">ajax登录</button>
                </div>

            </div>

        </div>
    </div>
{% endblock %}


<script>
    var user = $([id = "id_username"]).val();
    var pwd = $([id = "id_password"]).val();


    $("#btn_up").click = function () {

        console.log(user, pwd);

        $.ajax({
            url: "http://127.0.0.1:8000/account/login/",
            type: "POST",
            data: {
                username: user,
                password: pwd,

            },
            success: function (res) {
                console.log(res);
            },
            error: function (err) {
                console.log(err);
            }
        })
    };


    console.log($("[name='csrfmiddlewaretoken']").val());
    console.log(location.search);
    console.log(location.search.slice(6))
    $(".login_btn").click(function(){

        $.ajax({
            url: "",
            type: "post",
            data: {
              user: $("#user").val(),
              pwd: $("#pwd").val(),
              validcode: $("#validcode").val(),
              csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
            },
            success: function(response){

                console.log(response);

                if(response.user){
                    // 登录成功

                if(location.search.slice(6)){
                        location.href = location.search.slice(6)
                    }
                    else{
                        location.href="/"
                    }

                }else{
                    //登录失败
                    $(".error").html(response.err_msg)
                }
            },

        })

    });

    //点击验证码图片刷新
    $("#img").click(function(){
        $(this)[0].src += "?"
    })


</script>